<div id="cordova-geolocation" data-view="cordova/geolocation">
<style type="text/css">
	#location{
		font-size: 20px;
		margin-top: 20px;
		font-weight: bold;
		text-align: center;
	}
	.con{
		padding: 20px 20%;
	}
	.get{
		/*height: 40px;*/
		width: 100%;
		margin-top: 20px;
	}
	.watch{
		/*height: 40px;*/
		width: 100%;
		margin-top: 20px;
	}
	.clear{
		/*height: 40px;*/
		width: 100%;
		margin-top: 20px;
	}

</style>
  <header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left" data-action="back"></a>
    <h1 class="title">Geolocation</h1>
  </header>
  <div class="content">
  	<div class="con">
  		<button class="get btn btn-block btn-primary">getGeolocation</button>
  		<button class="watch btn btn-block btn-primary">watchGeolocation</button>
  		<button class="clear btn btn-block btn-primary">clearGeolocation</button>
  	</div>
  	<div id="location">
  		<p>Waiting for geolocation...</p>
  	</div>
  </div>
  </div>
</div>